<template>
	<div class="baseInfo-container">
		<ul class="card">
			<li class="card" v-for="(item, index) in baseInfos" :key="index">
				<i :class="item.iconUrl"></i>
				<div class="cardData">
					<span class="title">{{ item.title }}</span>
					<span class="data">{{ item.data }}</span>
				</div>
			</li>
		</ul>
        <ul class="charts-info">
            <li class="message-chart">
                <div id="memberChange" class="memberChange"></div>
            </li>
            <li><Bar></Bar></li>
            <li><Bar></Bar></li>
            <li><Bar></Bar></li>
        </ul>
		
        
	</div>
</template>
<script>
import Bar from '@/components/echarts/SimpleBar.vue'
export default {
    components:{
        Bar
    },
	data() {
		return {
			baseInfos: [
				{
					iconUrl: "iconfont icon-chengyuan",
					title: "成员",
					data: "100",
				},
				{ iconUrl: "iconfont icon-xiaoxi", title: "消息", data: "99" },
				{ iconUrl: "iconfont icon-qian", title: "金额", data: "99" },
				{
					iconUrl: "iconfont icon-gouwuche",
					title: "收藏",
					data: "99",
				},
			],
		};
	},
	mounted() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = this.$echarts.init(
			document.getElementById("memberChange")
		);
		// 绘制图表
		
		var colors = ["#5793f3", "#d14a61", "#675bba"];

		var option = {
			color: colors,

			tooltip: {
				trigger: "none",
				axisPointer: {
					type: "cross",
				},
			},
			legend: {
				data: ["2015 降水量", "2016 降水量"],
			},
			grid: {
				top: 70,
				bottom: 50,
			},
			xAxis: [
				{
					type: "category",
					axisTick: {
						alignWithLabel: true,
					},
					axisLine: {
						onZero: false,
						lineStyle: {
							color: colors[1],
						},
					},
					axisPointer: {
						label: {
							formatter: function (params) {
								return (
									"降水量  " +
									params.value +
									(params.seriesData.length
										? "：" + params.seriesData[0].data
										: "")
								);
							},
						},
					},
					data: [
						"2016-1",
						"2016-2",
						"2016-3",
						"2016-4",
						"2016-5",
						"2016-6",
						"2016-7",
						"2016-8",
						"2016-9",
						"2016-10",
						"2016-11",
						"2016-12",
					],
				},
				{
					type: "category",
					axisTick: {
						alignWithLabel: true,
					},
					axisLine: {
						onZero: false,
						lineStyle: {
							color: colors[0],
						},
					},
					axisPointer: {
						label: {
							formatter: function (params) {
								return (
									"降水量  " +
									params.value +
									(params.seriesData.length
										? "：" + params.seriesData[0].data
										: "")
								);
							},
						},
					},
					data: [
						"2015-1",
						"2015-2",
						"2015-3",
						"2015-4",
						"2015-5",
						"2015-6",
						"2015-7",
						"2015-8",
						"2015-9",
						"2015-10",
						"2015-11",
						"2015-12",
					],
				},
			],
			yAxis: [
				{
					type: "value",
				},
			],
			series: [
				{
					name: "2015 降水量",
					type: "line",
					xAxisIndex: 1,
					smooth: true,
					data: [
						2.6,
						5.9,
						9.0,
						26.4,
						28.7,
						70.7,
						175.6,
						182.2,
						48.7,
						18.8,
						6.0,
						2.3,
					],
				},
				{
					name: "2016 降水量",
					type: "line",
					smooth: true,
					data: [
						3.9,
						5.9,
						11.1,
						18.7,
						48.3,
						69.2,
						231.6,
						46.6,
						55.4,
						18.4,
						10.3,
						0.7,
					],
				},
			],
        };
        myChart.setOption(option);
	},
};
</script>
<style lang="less">
.baseInfo-container {
	width: 100%;
	height: 200px;
	& > ul.card {
		display: flex;
		justify-content: space-around;
		height: 100%;
		& > li {
			width: 22%;
			height: 180px;
			padding: 0 5%;
			box-sizing: border-box;
			background: #fff;
			box-shadow: 2px 2px 20px 4px rgba(250, 250, 250, 0.3);
			display: flex;
			justify-content: space-between;
			& > .cardData {
				font-size: 0.8889rem;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			& > .iconfont {
				line-height: 180px;
				font-size: 1.6667rem;
			}
		}
	}
	.memberChange {
		width: 100%;
		height: 200px;
    }
    ul.charts-info{
        display: flex;
		justify-content: space-around;
        height: 100%;
        & > li{
            width: 22%;
			height: 180px;
			box-sizing: border-box;
			background: #fff;
			box-shadow: 2px 2px 20px 4px rgba(165, 165, 165, 0.3);
        }
    }
}
</style>